<template>
  <div class="hot">
    <Suspense>
      <RecommendSlot :imageBaseUrl="imageBaseUrl" :recommends="hotRecommend">
        <template #title>
          热门推荐
        </template>
      </RecommendSlot>
    </Suspense>
    <Suspense>
      <BookRank :bookRanks="bookRanks">
        <template #title>
          点击榜单
        </template>
      </BookRank>
    </Suspense>

  </div>
</template>
<script lang="ts" setup>
import {nextTick, onMounted, type PropType, ref} from "vue";
import {ElLoading} from "element-plus";
import {useRouter} from "vue-router";
import {listVisitRankBooks} from "@/api/book";
import BookRank from "@/components/home/RankSlot.vue";
import RecommendSlot from "@/components/home/RecommendSlot.vue";

const router = useRouter();

interface Book {
  /* 类型;0-轮播图 1-顶部栏 2-本周强推 3-热门推荐 4-精品推荐 */
  type: number;

  /* 小说ID */
  bookId: number;

  /* 小说封面地址 */
  picUrl: string;

  /* 小说名 */
  bookName: string;

  /* 作者名 */
  authorName: string;

  /* 书籍描述 */
  bookDesc: string;
}

const props = defineProps({
  hotRecommend: {
    type: Array as PropType<Book[]>,
    default: () => []
  }
})

// const imageBaseUrl = ref(process.env.VITE_APP_BASE_IMG_URL);
const imageBaseUrl = ref(import.meta.env.VITE_APP_BASE_IMG_URL);
const bookDetail = (bookId: any) => {
  router.push({path: `/book/${bookId}`});
};
onMounted(() => {

})
const bookRanks = ref([] as Book[]);

onMounted(async () => {
  const {data} = await listVisitRankBooks();
  data.forEach((book: any) => {
    if (bookRanks.value.length < 10) {
      bookRanks.value.push(book);
    }
  })
})


</script>


<style lang="scss" scoped>
.hot {
  width: 60%;
  margin: 0 auto;
  padding: 10px;
  background-color: #FFFFFF;
  margin-top: 20px;
  box-sizing: border-box;
  display: flex;

}
</style>